import React from 'react';
import './../static/css/login.css';
import CheckWanning from './../module/common/errorMessage.js'
import {login,getuser} from './../api';
import {set} from './../store';


export default class Login extends React.Component {
  constructor(props) {
	super(props);
		this.state = {
			username: "",
			password: "",
			rememberMe: 0,
			nameError:'',
			passwordError:'',
			loginError:'',
			allow: true,
			loginStatus: '',
			statusColor: 'init',
		}
		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
		this.userCheck = this.userCheck.bind(this);
		this.passwordCheck = this.passwordCheck.bind(this);
	}

	handleChange(event) {
		const target = event.target;
		const name = target.name;
		this.setState({[name]: target.value});
	}

	userCheck(event) {
		const minUsernameLength = 0;
		if(this.state.username.length < minUsernameLength) {
			this.setState({
				nameError:'this username is too short',
				allow: false
			});
		} else {
			this.setState({
				nameError:'',
				allow:true
			})
		}
	}

	passwordCheck(event) {
		const minUsernameLength = 0;

		if(this.state.password.length < minUsernameLength) {
			
			this.setState({
				passwordError:'this password is too short',
				allow: false
			});
		} else {
			this.setState({
				passwordError:'',
				allow:true
			});
		}
	}

	handleSubmit(event) {
		this.setState ({
			loginStatus: '正在登录...请稍后',
			statusColor: 'init'
		});
		if(!this.state.allow) {
			return 
		} else {
			login({username:this.state.username,password:this.state.password}).then(resp=>{
				
				if(resp.status===200) {
					this.setState({
	   					loginStatus:'登录成功，正在配置用户信息...',
	   					statusColor: 'init'
	  		    	})
					this.setState({
					  loginError: resp.message,
					});
					set('token',resp.token);
					set('username',this.state.username);
					set('login_status',true);
					console.info("登录验证成功，token信息已保存，正在准备跳转...");
					set('_user',JSON.stringify(resp.user));
					this.props.history.push('/home');
				} else {
					this.setState({
				   		loginStatus: resp.message,
				   		statusColor: 'error'
				    })
					event.persist();
				}
			}).catch(err=>{
			   this.setState({
			   		loginStatus:'登录失败...',
			   		statusColor: 'error'
			   })
			});
		}
	}

    render() {
	    return (
	      <div className="bg container_bg">
		      <div className="container">

		      		<div className="form row">
		      			<div className="pre-header"><img src="https://www.maksdu.com/static/image/default.jpg" width="74px" height="74px"/></div>
		      			<div className="form-title">您好，欢迎光临</div>
		      			<div className="form-horizontal col-md-offset-3" id="login_form">  
			                <div className="col-md-9">
			                    <div className="form-group">   
			                        <input className="form-control required" onBlur={this.userCheck} onChange={this.handleChange}  value={this.state.username} type="text" placeholder="用户名" id="username" name="username" maxLength="20"/>
			                        <CheckWanning message={this.state.nameError} />       
			                    </div>
			                    <div className="form-group">
				                    <input className="form-control required" onBlur={this.passwordCheck} onChange={this.handleChange} value={this.state.password} type="password" placeholder="密码" id="password" name="password" minLength="3" maxLength="12"/>
				                    <CheckWanning message={this.state.passwordError} />
			                    </div>				                    
			                </div>
		                	<div className="next-dish">
		                		<div className="rememberMe"><input type="checkbox" title="勾选"/><span>记住密码</span></div>
		                		<div className="registry"><a href="register">注册新用户</a></div>
		                		<div className="clear"></div>
		                	</div>
		           		</div>
		           		<div className={this.state.statusColor+" loginStatus"}>{this.state.loginStatus}</div>
		           		<div className="next-btn">
		                    <button type="button" onClick={this.handleSubmit} className="btn btn-success btn-wild" name="submit">登录</button>
		                </div>
		      		</div>
		      </div>

	      </div>
	    );
    }
}